<template>
  <div>
    <el-card>
      <div slot="header">
        粉丝管理
      </div>
      <!-- 内容区 -->
      <el-tabs v-model="activeName" type="card">
        <el-tab-pane label="粉丝概况" name="base">
          <!-- 粉丝概况 -->
          <div>粉丝概况</div>
        </el-tab-pane>
        <el-tab-pane label="粉丝画像" name="picture">
          <!-- 粉丝画像 -->
          <div ref="fans" style="width:600px;height:400px"></div>
        </el-tab-pane>
        <el-tab-pane label="粉丝列表" name="list">
          <!-- 粉丝列表 -->
          <div class="fans_list">
            <!-- item.id.toString() 因为使用json-bigint后id变成了对象 -->
            <div class="fans_item" v-for="item in list" :key="item.id.toString()">
              <!-- 头像 -->
              <el-avatar :size="80" :src="item.photo">
                <!-- 如果src路径对应的图片加载失败，就显示默认的如下的图片 -->
                <img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png" />
              </el-avatar>
              <!-- 用户名 -->
              <p>{{item.name}}</p>
              <!-- 关注按钮 -->
              <el-button type="primary" plain size="small">+关注</el-button>
            </div>
          </div>
          <el-pagination style="margin-top:20px" background layout="prev, pager, next" :total="total" :current-page="filterParams.page" :page-size="filterParams.per_page" @current-change="changePager"></el-pagination>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>
<script>
import { loadFansList } from '@/api/fans.js'
import * as echarts from 'echarts'
export default {
  data () {
    return {
      // 参数
      filterParams: {
        page: 1,
        per_page: 20
      },
      activeName: 'list',
      // 粉丝列表
      list: [],
      total: 0
    }
  },
  methods: {
    // echarts 初始化图表
    initEcharts () {
      // 因为vue不可以直接操作dom  所以如果想操作dom 给标签加ref
      const myChart = echarts.init(this.$refs.fans)
      const option = {
        color: ['#3398DB'],
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '直接访问',
            type: 'bar',
            barWidth: '60%',
            data: [10, 52, 200, 334, 390, 330, 220]
          }
        ]
      }
      myChart.setOption(option)
    },
    // 页码改变
    async changePager (page) {
      this.filterParams.page = page
      this.loadFansList()
    },
    // 获取粉丝列表
    async loadFansList () {
      try {
        const ret = await loadFansList(this.filterParams)
        this.list = ret.data.results
        this.total = ret.data.total_count
      } catch (e) {
        console.log(e)
        this.$message.error('获取粉丝列表失败')
      }
    }
  },
  created () {
    this.loadFansList()
  },
  // 初始化页面完成
  mounted () {
    // 因为该方法里操作dom元素了  所以必须当页面初始化完成后才能生效
    this.initEcharts()
  }
}
</script>
<style scoped lang="less">
.fans_item {
  width: 120px;
  height: 170px;
  border: 1px dashed #ddd;
  text-align: center;
  padding: 10px 0;
  display: inline-block;
  margin-right: 50px;
  margin-bottom: 15px;
  p {
    font-size: 12px;
    padding: 5px 0;
  }
}
</style>
